/**
 * 导航栏相关的全局样式
 * 提供统一的导航栏高度和布局样式
 */

// 导航栏高度变量 (默认值，会被JS动态更新)
:root {
    --navbar-height: 200rpx;
    --navbar-status-bar-height: 88rpx;
    --navbar-pure-height: 88rpx;
    --navbar-safe-distance: 40rpx;
}

// 通用的页面容器类
.page-container {
    padding: 20rpx;
    padding-top: var(--navbar-height);
    min-height: 100vh;
    box-sizing: border-box;
}

// 固定导航栏通用样式
.uv-navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;
}

// 带导航栏的页面容器
.navbar-page {
    padding-top: var(--navbar-height);

    &.no-padding {
        padding: 0;
        padding-top: var(--navbar-height);
    }

    &.with-side-padding {
        padding: 0 20rpx;
        padding-top: var(--navbar-height);
    }
}

// 固定导航栏下的内容区域
.navbar-content {
    padding-top: var(--navbar-height);
}

// 状态栏占位
.status-bar-placeholder {
    height: var(--navbar-status-bar-height);
    width: 100%;
}

// 导航栏占位
.navbar-placeholder {
    height: var(--navbar-height);
    width: 100%;
}

// 安全距离占位
.safe-area-placeholder {
    height: var(--navbar-safe-distance);
    width: 100%;
}

// 响应式工具类
.pt-navbar {
    padding-top: var(--navbar-height) !important;
}

.mt-navbar {
    margin-top: var(--navbar-height) !important;
}

.h-navbar {
    height: var(--navbar-height) !important;
}

// 特殊场景的样式
.fullscreen-with-navbar {
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
}

.sticky-below-navbar {
    position: sticky;
    top: var(--navbar-height);
    z-index: 10;
}